<template>
    <div class="registry">
        <div style="display:flex;background-color:white;width:50%;border-radius:5px;overflow:hidden; ">
            <div style="flex:1;">
                <img src="@/assets/registry.jpg" alt="" style="width:100%;height:100%;opcity:0.5;">
            </div>
            <div style="flex:1;display:flex;align-items:center;justify-content:center;height:350px;">
                <el-form :model="user" style="width:75%" :rules="rules" ref="registryRef">
                    <div style="font-size:23px;font-weight:bold;text-align:center;margin-bottom:25px;">新用户注册 </div>
                    <el-form-item prop="count">
                        <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入账号" v-model="user.count" ></el-input>
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码" v-model="user.pwd"></el-input>
                    </el-form-item>
                    <el-form-item prop="confirmPass">
                        <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请确认密码" v-model="user.confirmPass"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width:100%;background-color:green" @click="registry">注&nbsp;&nbsp;&nbsp;&nbsp;册</el-button>
                    </el-form-item>
                    <div style="display:flex;font-size:smaller;">
                        <div style="flex:1">已经有账号了？请<span style="color: #089444;cursor:pointer" @click="$router.push('/login')">&nbsp;登录</span></div>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .registry{
        width: 100%;
        min-width: 1240px;
        height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        background: url('../assets/bg1.jpg') no-repeat center center fixed;
        overflow:hidden;
    }
</style>

<script>

export default{
    name:'Registry',
    data(){

        //密码确认
        const validatePassword =(rule,confirmPass,callback)=>{
            if(confirmPass===''){
                callback(new Error('请确认密码'))
            }else if(confirmPass!==this.user.pwd){
                callback(new Error('两次输入密码不一致'))
            }else{
                callback()
            }
        }

        return{
            user:{

                count:'',
                pwd:'',
                confirmPass:''
            },
            rules:{
                count: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                confirmPass: [
                    {validator: validatePassword, trigger: 'blur' },
                ],
            }
        }
    },
    methods:{

        registry(){
            this.$refs['registryRef'].validate((valid) => {
                if (valid) {
                    this.$request.post('/registry',this.user).then(res=>{
                        if(res.code==='200'){
                            this.$router.push('/login')
                            this.$message.success('注册成功')
                        }else{
                            this.$message.error(res.msg)
                        }
                    })
                }
            })
        }
    }
}

</script>